import React, { useEffect, useState } from 'react'
import { css } from '@/utils/index'
import { logo } from '@/const/config'
import { fetchClassify } from '@/request'

export default function (props: any) {
  const { LG } = props

  const [data, setData] = useState({})

  const load = async () => {
    const classify = await fetchClassify()
    classify && setData({ classify })
  }

  useEffect(() => {
    load()
  }, [])

  const onTap = item => {
    console.log('onTap', item)
  }

  const { classify = [] } = data

  return (
    <div className='layout-bottom'>
      <div className='cnt-width l-f'>
        <div className='left'>
          <p className='ctim'>{LG.CATEGORY}</p>
          <div className='l-f ai-c l-f-w'>
            {classify.map(item => (
              <p key={item.dictValue} onClick={() => onTap(item)} className='tag is-click-hand'>
                {LG[item.dictValue]}
              </p>
            ))}
          </div>
        </div>
        <div className='right'>
          <img src={logo} />
          <p className='ctim'>{LG.CTIM}</p>
          <p className='phone'>86-10-85061483</p>
          <p className='email'>amsp.service@cgtn.com</p>
        </div>
      </div>
      <div className='cnt-width line' />
      <p className='cnt-width copyright'>Copyright © 2020 AMSP.2022京ICP备16065310号-11</p>
    </div>
  )
}
